<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画练习</title>
    <style>
        .con{
            width: 400px;
            height: 400px;
            outline: 1px solid black;
            position: relative;
        }
        .ac{
            width: 100px;
            height: 100px;
            outline: 1px solid rgb(76, 0, 255);
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        @keyframes a1 {
            from {}
            50% {
                transform: rotate(180deg) translateY(100px);
            }
            100% {
                transform: rotate(360deg) translateY(0);
            }
        }
        .rb{
            width: 100px;
            height: 100px;
            border-top-right-radius: 100%;
            position: absolute;
            top: -50%;
            left: 50%;
            transform-origin: 0 100%;
            animation: a1 2s   infinite ;
        }
        .r1{
            background-color: rgb(211, 67, 67);
        }
        .r2{
            background-color: rgb(96, 236, 78);
            transform: rotate(90deg);
        }
        .r3{
            background-color: rgb(67, 141, 211);
            transform: rotate(180deg);
        }
        .r4{
            background-color: rgb(122, 113, 238);
            transform: rotate(270deg);
        }
        @keyframes loading {
            0% {
                transform: scaleY(1);
            }
            25% {
                transform: scaleY(2);
            }
            50% {
                transform: scaleY(1);
            }
            100% {
                transform: scaleY(1);
            }
        }
        .loading-con{
            width: 400px;
            height: 200px;
            outline: 1px solid black;
            margin: 100px auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .loading-box{
            width: 40px;
            height: 100px;
            background-color: rgb(137, 235, 145);
            animation: loading 1s infinite;
        }
        .b2{
            animation-delay: 0.1s;
        }
        .b3{
            animation-delay: 0.2s;
        }
        .b4{
            animation-delay: 0.3s;
        }
        .b5{
            animation-delay: 0.4s;
        }
        .b6{
            animation-delay: 0.5s;
        }

        
    </style>
</head>
<body>
    <!-- <div class="con">
        <div class="ac">
            <div class="rb r1">
    
            </div>
            <div class="rb r2">
    
            </div>
            <div class="rb r3">
    
            </div>
            <div class="rb r4">
    
            </div>
    
        </div>
    </div> -->
    <div class="loading-con">
        <div class="loading-box b1"></div>
        <div class="loading-box b2"></div>
        <div class="loading-box b3"></div>
        <div class="loading-box b4"></div>
        <div class="loading-box b5"></div>
        <div class="loading-box b6"></div>
    </div>
    
    
</body>
</html>